<script setup>
import Header from "@/pages/index/header/Header.vue";
import Aside from "@/pages/index/aside/Aside.vue";
import {baseStore} from "@/store/baseStore.js";
// 全局socket
import {inject, onMounted} from "vue";
import Notification from "@/components/Progress.vue";
import webSocket from "@/util/WebSocket.js";
import {storeToRefs} from "pinia";


let bs = baseStore()
let {menuTab,token} = storeToRefs(bs)
const bus = inject('bus')

const onResize = () =>{
    window.addEventListener('resize', (e) => {
        bus.emit('resize',e)
    });
}
onMounted(() => {
    onResize()
    const socket = webSocket(bus)
    socket.init(token.value)
    bus.on(socket.const_p[1],(evt) => {
        if(!evt.reason){
            return
        }
        bs.token = null
        location.reload()
    })
})

</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-header class="el-header-f">
                <Header></Header>
            </el-header>
            <el-container>
                <el-aside class="el-aside-f">
                    <Aside></Aside>
                </el-aside>
                <el-main class="el-main-f">
                    <router-view v-slot="{ Component }">
                        <KeepAlive :include="menuTab">
                            <component :is="Component"/>
                        </KeepAlive>
                    </router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
    <Notification />
</template>

<style lang='scss' scoped>
.el-header-f {
    height: 59px;
}

.el-aside-f, .el-main-f {
    height: calc(100vh - 59px);
}

.el-aside-f {
    width: auto;
}

.el-main-f {
    width: 100%;
}
</style>